<template>
<div class="login_short">
  <div class="login_short_cell">
    <van-cell-group >
      <van-field v-model="username" required label="用户名" placeholder="请输入用户名/可不填" class="field_input"/>
      <van-field v-model="phone" required label="手机号  +86" placeholder="请输入手机号" :error-message="errorMessage"/>
    </van-cell-group>
  </div>
  <div class="login_short_divider">
    <el-divider content-position="center">使用手机号发送验证码</el-divider>
  </div>
  <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
    <template #button>
      <van-button size="small" type="primary" :disabled="dis"	 @click="getMessage">{{text}}</van-button>
    </template>
  </van-field>

  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">登录</van-button>
  </div>

  <div class="login_short_serve">
    <el-checkbox v-model="checked">
      我已阅读并同意
      <el-link type="primary" :underline="false" href="http://localhost:8080/#/">服务条款，</el-link>
      <el-link type="success" :underline="false" href="http://localhost:8080/#/">隐私政策</el-link>
    </el-checkbox>
  </div>
</div>
</template>

<script>
import {Message} from "element-ui";
export default {
  name: "ShortMessage",
  data() {
    return {
      username: '',
      phone: '',
      sms: '',
      errorMessage: '',
      checked: '',
      text: '发送验证码',
      dis: false,
    }
  },
  methods: {
    getMessage() {
      this.dis = true;
      Message.success({
        message: '短信已发送，请用手机及时查看',
      });
      let time = 60;
      let timer = setInterval(() => {   //   箭头函数改变了this指向
        if (time <= 1 ){
          clearInterval(timer);
          this.text = '发送验证码';
          this.dis = false;
          return;
        }
        time--;
        this.text = '还有' + time + 's';
      },1000)
    }
  }
}
</script>

<style scoped>
.login_short {
  position: relative;
  height: 300px;
}
.login_short_cell {
  margin-top: 0;
}
.login_short_serve {
  position: absolute;
  top: 270px;
}
.login_short_divider {
  width: 380px;
}
.field_input::placeholder {
  color: red;
  background-color: #CCC;
}
</style>

